<template>
	<!-- 选择时间 -->
	<!-- 	<u-picker :show="show" @change="onChange" @cancel="fnCloseTimePicker" @confirm="fnConfirm($event)"
		:columns="columns" :defaultIndex="value1">
			<div style="width:20px;height:50px;background-color: red;"></div>
	</u-picker> -->
	<u-popup :show="show" @close="fnCloseTimePicker" mode="bottom">
		<view>
			<view style="height: 80rpx;display: flex;justify-content: space-between;padding: 0 32rpx;">
				<view style="line-height: 80rpx;" @click="fnCloseTimePicker">取消</view>
				<view style="line-height: 80rpx;color:#4070FF;" @click="onSave">保存</view>
			</view>
			<picker-view immediate-change :indicator-style="'height: 40px;'" :value="value1" @change="onChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in columns[0]" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in columns[1]" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column v-if="!yearMonth">
					<view class="item" v-for="(item,index) in columns[2]" :key="index">{{item}}日</view>
				</picker-view-column>
				<picker-view-column style="pointer-events: none;" v-if="!yearMonth">
					<view class="item" v-for="(item,index) in columns[3]" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</u-popup>
	<!-- <u-datetime-picker ref="datetimePicker" @confirm="fnConfirm($event)" :maxDate="maxDate" @cancel="fnCloseTimePicker"
		:formatter="formatter" :show="show" v-model="value1" :mode="mode">
	</u-datetime-picker> -->
</template>

<script>
	export default {
		props: {
			mode: {
				default: 'date',
				type: String //year-month
			},
			show: {
				default: false,
				type: Boolean
			}, //显示
			defaultValue: {
				default: '',
				type: String
			},
			yearMonth:{
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				curentYear: '', //当前年
				currentMonth: '', //当前月
				currentDate: '',
				columns: [
					[],
					['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
					[],
					['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
				],
				hisValue: [0, 0, 0, 0],
				value1: [0, 0, 0, 0],
				maxDate: Number(new Date()),
			}
		},
		mounted() {
			let newData = new Date()
			let getYear = newData.getFullYear();
			this.cuurentYear = newData.getFullYear();
			this.currentMonth = newData.getMonth() + 1;
			this.currentDate = newData.getDate();
			let years = []
			for (let i = 10; i >= 0; i--) {
				years.push((getYear - i))
			}
			this.columns[0] = years
			// 设置日
			this.getDate(this.currentDate, 2)
			// 设置月
			this.getDate(this.currentMonth, 1)

			setTimeout(() => {
				// 选中当前时间
				this.value1[0] = 10
				this.value1[1] = newData.getMonth()
				this.value1[2] = newData.getDate() - 1
				this.value1[3] = newData.getDay() - 1
				this.$forceUpdate()
			}, 300)
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		watch: {
			defaultValue(val) {
				console.log('defaultValue', val)
			}
		},
		// computed: {
		// 	value1() {
		// 		if (this.defaultValue) {
		// 			return new Date(this.defaultValue.replaceAll("-", '/')).getTime()
		// 		} else {
		// 			return new Date().getTime()
		// 		}
		// 	}
		// },
		methods: {
			/**
			 * count 遍历数量
			 * index  下标0年 1月 2日 3星期
			 * */
			getDate(count, index = 2) {
				let counts = []
				for (let i = 0; i < count; i++) {
					counts.push(('0' + (i + 1)).slice(-2))
				}
				this.columns[index] = counts
				this.$forceUpdate()
			},
			fnCloseTimePicker() {
				this.$emit('update:show', false)
			},

			onChange(e) {
				let values = e.detail.value
				let year = this.columns[0][values[0]];
				let month = this.columns[1][values[1]];
				let day = this.columns[2][values[2]];

				let ymd = year + '/' + month + '/' + day
				let week = new Date(ymd).getDay();
				this.value1 = values
				if (week > 0) {
					this.value1[3] = week - 1;
				} else {
					this.value1[3] = 6
				}

				// 年月相等 日小于今天
				if (year == this.cuurentYear && month == this.currentMonth) {
					this.getDate(this.currentDate)
				} else {
					this.getDate(new Date(year, month, 0).getDate())
				}
				if (year == this.cuurentYear) {
					this.getDate(this.currentMonth, 1)
				} else {
					this.getDate(12, 1)
				}
				this.$forceUpdate()
			},
			onSave() {
				let year = this.columns[0][this.value1[0]];
				let month = this.columns[1][this.value1[1]];
				let day = this.columns[2][this.value1[2]];
				let ymd = year + '-' + month + '-' + day
				this.$emit('confirm', {
					value: ymd,
					date: ymd
				})
				this.fnCloseTimePicker()
			},
			onCancel(e) {
				// let date = uni.$u.timeFormat(e.value, this.timeFormat);

			}
		}
	}
</script>
<style scoped>
	.picker-view {
		width: 100vw;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 40px;
		text-align: center;
	}
</style>
